﻿<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8" />
    <title>Shimba Bootstrap 4 Admin Dashboard</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta content="A fully featured admin theme which can be used to build CRM, CMS, etc." name="description" />
    <meta content="Beethemesdesign" name="author" />

    <!-- favicon -->
    <link rel="shortcut icon" href="../../assets/images/favicon.png">


    <!-- Required css -->
    <link href="../../assets/css/icons.min.css" rel="stylesheet" type="text/css" />
    <link href="../../assets/css/style.css" rel="stylesheet" type="text/css" />
    <link href="../../assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

<!--   <link  href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css" rel="stylesheet" type="text/css">-->


</head>

<body>

    <!-- Begin page -->
    <div class="wrapper">

        <!-- ============================================================= -->
        <!-- ===============    side menu content start  ================= -->
        <!-- ============================================================= -->
        <div class="left-side-menu">
            <div class="slimscroll-menu">
                <!-------------------------------------->
                <!-- Put your logo hear in img tag -->
                <a href="index.html" class="logo">
                    <span class="logo-lg">
                        <img src="../../assets/images/logo.png" alt="">
                    </span>
                    <span class="logo-sm">
                        <img src="../../assets/images/logo_sm.png" alt="">
                    </span>
                </a>
                <!-- Logo content end -->
                <!-------------------------------------->
                <!-------------------------------------->
                <!-- User details start -->
                <div class="sidenav-user">
                    <h4 class="mb-1 mt-0">Cindy Deitch</h4>
                    <p class="mb-2">UI/UX Designer</p>
                    <img src="../../assets/images/users/avatar-1.jpg" alt="" class="rounded-circle">
                </div>
                <!-- User details end -->
                <!-------------------------------------->
                <!-------------------------------------->
                <!-- Menu link start -->
                <ul class="metismenu side-nav">
                    <li class="menu-caption menu-item">列表</li>
                    <li class="menu-item">
                        <a href="javascript: void(0);" class="menu-link">
                            <i class="feather icon-home"></i>
                            <span> 人员管理 </span>
                            <span class="badge badge-success badge-pill float-right mr-3">New</span>
                            <span class="menu-sub-icon"></span>
                        </a>
                        <ul class="menu-level-second collapse" aria-expanded="false">
                            <li><a href="/admin/index">主页</a></li>
                            <li><a href="/user/selectById">人员信息</a></li>
                            <li><a href="/admin/admin">管理管理员</a></li>
                            <li><a href="/comment/selectById">评论管理</a></li>

                        </ul>
                    </li>
                    <li class="menu-item">
                        <a href="javascript: void(0);" class="menu-link">
                            <i class="feather icon-command"></i>
                            <span class="badge badge-danger badge-pill float-right mr-3">100+</span>
                            <span> 订单管理 </span>
                            <span class="menu-sub-icon"></span>
                        </a>
                        <ul class="menu-level-second collapse" aria-expanded="false">
                            <li><a href="/user/selectById">人员信息</a></li>
                            <li><a href="/order-info/order/list">订单页面</a></li>
                        </ul>
                    </li>

                </ul>
                <!-- Menu link end -->
                <!-------------------------------------->

                <div class="clearfix"></div>
            </div>
        </div>
        <!-- ============================================================= -->
        <!-- ===============     side menu content End   ================= -->
        <!-- ============================================================= -->


        <!-- ============================================================== -->
        <!-- Start Page Content here -->
        <!-- ============================================================== -->

        <div class="content-page">
            <div class="content">

                <!-- ============================================================= -->
                <!-- ===============    Top bar header content start  ================= -->
                <!-- ============================================================= -->
                <div class="navbar-custom">
                    <!------------------------------------->
                    <!-- right side topbar content start -->
                    <ul class="list-unstyled topbar-right-menu float-right mb-0">
                        <li class="dropdown notification-list topbar-dropdown">
                            <a class="nav-link dropdown-toggle arrow-none" data-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
                                <i class="feather icon-mail noti-icon"></i>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right dropdown-menu-animated topbar-dropdown-menu">
                                <a href="javascript:" class="dropdown-item"><i class="feather icon-map-pin text-muted"></i> &nbsp; Loction</a>
                                <a href="javascript:" class="dropdown-item"><i class="feather icon-upload-cloud text-muted"></i> &nbsp; Upload File</a>
                                <a href="javascript:" class="dropdown-item"><i class="feather icon-activity text-muted"></i> &nbsp; Report</a>
                                <a href="javascript:" class="dropdown-item"><i class="feather icon-life-buoy text-muted"></i> &nbsp; Support</a>
                                <div class="dropdown-divider"></div>
                                <a href="javascript:" class="dropdown-item"><i class="feather icon-github text-muted"></i> &nbsp; Github</a>
                                <a href="javascript:" class="dropdown-item"><i class="feather icon-slack text-muted"></i> &nbsp; Slack</a>
                            </div>
                        </li>

                        <li class="dropdown notification-list">
                            <a class="nav-link dropdown-toggle arrow-none" data-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
                                <i class="feather icon-bell noti-icon"></i>
                                <span class="noti-icon-badge"></span>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right dropdown-menu-animated dropdown-lg">
                                <div class="dropdown-item noti-title">
                                    <h5 class="m-0">
                                        <span class="float-right">
                                            <a href="javascript: void(0);" class="text-dark">
                                                <small>Clear All</small>
                                            </a>
                                        </span>Notification <span class="badge badge-danger badge-pill">5 new</span>
                                    </h5>
                                </div>
                                <div class="slimscroll" style="max-height: 230px;">
                                    <!-- item start-->
                                    <a href="javascript:void(0);" class="dropdown-item notify-item">
                                        <div class="notify-icon bg-primary">
                                            <i class="mdi mdi-comment-account-outline"></i>
                                        </div>
                                        <p class="notify-details">New order has been received.
                                            <small class="text-muted">1 min ago</small>
                                        </p>
                                    </a>
                                    <!-- item end-->
                                    <!-- item start-->
                                    <a href="javascript:void(0);" class="dropdown-item notify-item">
                                        <div class="notify-icon bg-info">
                                            <i class="mdi mdi-account-plus"></i>
                                        </div>
                                        <p class="notify-details">Membership application has been added.
                                            <small class="text-muted">5 hours ago</small>
                                        </p>
                                    </a>
                                    <!-- item end-->
                                    <!-- item start-->
                                    <a href="javascript:void(0);" class="dropdown-item notify-item">
                                        <div class="notify-icon">
                                            <img src="../../assets/images/users/avatar-2.jpg" class="img-fluid rounded-circle" alt="" /> </div>
                                        <p class="notify-details">Cristina Pride</p>
                                        <p class="text-muted mb-0 user-msg">
                                            <small>New report file has been uploaded.</small>
                                        </p>
                                    </a>
                                    <!-- item end-->
                                    <!-- item start-->
                                    <a href="javascript:void(0);" class="dropdown-item notify-item">
                                        <div class="notify-icon bg-primary">
                                            <i class="mdi mdi-comment-account-outline"></i>
                                        </div>
                                        <p class="notify-details">Database sever #2 has been fully restarted.
                                            <small class="text-muted">4 days ago</small>
                                        </p>
                                    </a>
                                    <!-- item end-->
                                    <!-- item start-->
                                    <a href="javascript:void(0);" class="dropdown-item notify-item">
                                        <div class="notify-icon">
                                            <img src="../../assets/images/users/avatar-4.jpg" class="img-fluid rounded-circle" alt="" /> </div>
                                        <p class="notify-details">Karen Robinson</p>
                                        <p class="text-muted mb-0 user-msg">
                                            <small>Membership application has been added.</small>
                                        </p>
                                    </a>
                                    <!-- item end-->
                                    <!-- item start-->
                                    <a href="javascript:void(0);" class="dropdown-item notify-item">
                                        <div class="notify-icon bg-info">
                                            <i class="mdi mdi-heart"></i>
                                        </div>
                                        <p class="notify-details">Herry liked
                                            <b>Admin </b>
                                            <small class="text-muted">13 days ago</small>
                                        </p>
                                    </a>
                                </div>
                                <a href="javascript:void(0);" class="dropdown-item text-center text-primary notify-item notify-all">
                                    View All
                                </a>
                            </div>
                        </li>
                        <li class="dropdown notification-list">
                            <a class="nav-link dropdown-toggle nav-user arrow-none mx-0" data-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
                                <span class="account-user-avatar">
                                    <img src="../../assets/images/users/avatar-1.jpg" alt="user-image" class="rounded-circle">
                                </span>
                                <span>
                                    <span class="account-user-name">Rang Avdhut</span>
                                </span>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right dropdown-menu-animated topbar-dropdown-menu profile-dropdown">
                                <a href="javascript:" class="dropdown-item"><i class="feather icon-user text-muted"></i> &nbsp; My profile</a>
                                <a href="javascript:" class="dropdown-item"><i class="feather icon-mail text-muted"></i> &nbsp; Messages</a>
                                <a href="javascript:" class="dropdown-item"><i class="feather icon-settings text-muted"></i> &nbsp; settings</a>
                                <div class="dropdown-divider"></div>
                                <a th:href="@{/logout}" class="dropdown-item"><i class="feather icon-power text-danger"></i> &nbsp; Log Out</a>
                            </div>
                        </li>
                    </ul>
                    <!-- right side topbar content end -->
                    <!------------------------------------->

                    <!---------------------------------------------->
                    <!-- Left side topbar content Start -->

                    <!-- Minimenu and mobille toggle button start -->
                    <button class="button-menu-mobile open-left">
                        <i class="feather icon-menu"></i>
                    </button>
                    <!-- Minimenu and mobille toggle button end -->


                    <div class="header-search">
                        <form>
                            <div class="input-group">
                                <span class="feather icon-search"></span>
                                <input type="text" class="form-control" placeholder="Search...">
                            </div>
                        </form>
                    </div>
                    <!-- Left side topbar content end -->
                    <!------------------------------------->
                </div>
                <!-- ================================================================== -->
                <!-- ===============    Top bar header content end  ================= -->
                <!-- ================================================================== -->


                <!-- Start Content-->
                <div class="container-fluid">

                    <!-- start page title -->
                    <div class="row">
                        <div class="col-12">
                            <div class="page-title-box">
                                <div class="page-title-right">
                                    <ol class="breadcrumb m-0">
                                        <li class="breadcrumb-item"><a href="javascript: void(0);"><i class="feather icon-home"></i></a></li>
                                        <li class="breadcrumb-item active">Widgets</li>
                                    </ol>
                                </div>
                                <h4 class="page-title">Widgets</h4>
                            </div>
                        </div>
                    </div>
                    <!-- end page title -->

                    <!-- Data widget starts -->
                    <div class="row">
                        <div class="col-12">
                            <div class="card sale-card">
                                <div class="card-header">
                                    <h5>Orders Overview</h5>
                                </div>
                                <div class="card-body p-0">
                                    <div class="table-responsive-md">
                                        <div class="ui attached segment">
                                            <form th:action="@{/comment/select}" method="get" style="display: inline-block !important;">
                                                <input type="text" name="username" placeholder="输入用户名查找">
                                                <input type="submit" value="搜索">
                                            </form>
                                            <!--<a th:href="@{/update}"  style="margin-left: 30px !important;">添加</a>-->
                                        </div>
                                        <table class="table table-hover mb-0">
                                            <thead class="thead-light">
                                                <tr>
                                                    <th>序号</th>
                                                    <th>姓名</th>
                                                    <th>评论内容</th>
                                                    <th>评论时间</th>
                                                    <th>操作</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr th:each="user : ${page.records}">
                                                    <td th:text="${user.id}"></td>
                                                    <td th:text="${user.userName}"></td>
                                                    <td th:text="${user.comDesc}"></td>
                                                    <td th:text="${user.createTime}"></td>
                                                    <td>
                                                        <a th:href="@{/comment/updateComment/{id}(id=${user.id})}" class="btn btn-icon btn-primary mr-1" data-toggle="tooltip" title="Edit"><i class="feather icon-edit-2"></i></a>
                                                        <a href="#!" class="btn btn-icon btn-success mr-1" data-toggle="tooltip" title="Check"><i class="feather icon-check-square"></i></a>
                                                        <a th:href="@{/comment/deleteComment/{id}(id=${user.id})}" class="btn btn-icon btn-danger mr-1" data-toggle="tooltip" title="Delete"><i class="feather icon-trash-2"></i></a>
                                                    </td>
                                                </tr>

                                            </tbody>
                                        </table>
                                        <!--分页-->
                                        <div class="row">
                                            <!--分页文字信息  -->
                                            <div class="col-md-6" >当前 [[${page.current}]]页,总[[${page.pages }]]
                                                页,总[[ ${page.total }]] 条记录</div>
                                            <!-- 分页条信息 -->
                                            <div class="col-md-6">
                                                <nav aria-label="Page navigation">
                                                    <ul class="pagination">
                                                        <!--点击首页会跳转到第一页，并且首页禁用-->
                                                        <th:block th:if="${page.current==1}">
                                                            <li class="active,disabled">
                                                                <a>首页</a></li>
                                                        </th:block>
                                                        <th:block th:if="${page.current>1}">
                                                            <li><a th:href="@{/comment/selectById(pn=1)}">首页</a></li>
                                                        </th:block>
                                                        <li  th:if="${page.hasPrevious()}">
                                                            <a  th:href="@{/comment/selectById(pn=${page.getCurrent()-1})}">
                                                                <span aria-hidden="true">&laquo;</span>
                                                            </a>
                                                        </li>
                                                        <th:block  th:if="${page.getCurrent()<=page.pages}" th:each="i:${#numbers.sequence(1,page.pages)}">
                                                            <!--&lt;!&ndash;加判断是不是当前页，如果是 高亮显示，并且取消超链接，这样避免了点击当前页重复发送请求查询数据&ndash;&gt;-->
                                                            <th:block th:if="${page.getCurrent()==i}">
                                                                <li  class="active" >
                                                                    <a th:text="${i}"></a>
                                                                </li>
                                                            </th:block>
                                                            <th:block th:if="${page.getCurrent()!=i}">
                                                                <li>
                                                                    <a th:text="${i}" th:href="@{/comment/selectById(pn=${i})}"></a>
                                                                </li>
                                                            </th:block>

                                                        </th:block>
                                                        <!--&lt;!&ndash;遍历页码，只显示五页，点击下一页之后，每次多遍历两个页码&ndash;&gt;
                                                        <th:block  th:if="${page.getCurrent()<=3}" th:each="i:${#numbers.sequence(1,5)}">
                                                            &lt;!&ndash;加判断是不是当前页，如果是 高亮显示，并且取消超链接，这样避免了点击当前页重复发送请求查询数据&ndash;&gt;
                                                            <th:block th:if="${page.getCurrent()==i}">
                                                                <li  class="active" >
                                                                    <a th:text="${i}"></a>
                                                                </li>
                                                            </th:block>
                                                            <th:block th:if="${page.getCurrent()!=i}">
                                                                <li>
                                                                    <a th:text="${i}" th:href="@{/user/selectById(pn=${i})}"></a>
                                                                </li>
                                                            </th:block>

                                                        </th:block>

                                                        <th:block th:if="${page.getCurrent()>3 && page.getCurrent()+2<=page.getPages()}"
                                                                  th:each="i:${#numbers.sequence(page.getCurrent()-2,page.getCurrent()+2)}">
                                                            &lt;!&ndash;同理上&ndash;&gt;
                                                            <th:block th:if="${page.getCurrent()==i}">

                                                                <li  class="active" >
                                                                    <a th:text="${i}"></a>
                                                                </li>
                                                            </th:block>

                                                            <th:block th:if="${page.getCurrent()!=i}">
                                                                <li>
                                                                    <a th:text="${i}" th:href="@{/user/selectById(pn=${i})}"></a>
                                                                </li>
                                                            </th:block>
                                                        </th:block>
                                                        <th:block th:if="${page.getCurrent()+2>page.getPages()}"
                                                                  th:each="i:${#numbers.sequence(page.getPages()-4,page.getPages())}">
                                                            &lt;!&ndash;同理上&ndash;&gt;
                                                            <th:block th:if="${page.getCurrent()==i}">
                                                                <li  class="active,disabled" >
                                                                    <a th:text="${i}"></a>
                                                                </li>
                                                            </th:block>
                                                            <th:block th:if="${page.getCurrent()!=i}">
                                                                <li>
                                                                    <a th:text="${i}" th:href="@{/user/selectById(pn=${i})}"></a>
                                                                </li>
                                                            </th:block>
                                                        </th:block>-->
                                                        <!--下一页-->
                                                        <li  th:if="${page.hasNext()}">
                                                            <a  th:href="@{/comment/selectById(pn=${page.current+1})}">
                                                                <span aria-hidden="true">&raquo;</span>
                                                            </a></li>
                                                        <!--点击末页会跳转到最后一页，并且最后一页禁用-->
                                                        <th:block th:if="${page.current<page.pages}">
                                                            <li > <a th:href="@{/comment/selectById(pn=${page.pages})}">末页</a></li>
                                                        </th:block>
                                                        <th:block th:if="${page.current==page.pages}">
                                                            <li class="active,disabled"> <a>末页</a></li>
                                                        </th:block>
                                                    </ul>
                                                </nav>
                                            </div>
                                        </div>
                                        <!--提示-->
                                        <div class="ui success message" th:unless="${#strings.isEmpty(message)}">
                                            <i class="close icon"></i>
                                            <div class="header">提示：</div>
                                            <p th:text="${message}"></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>


                    </div>
                    <!-- Data widget end -->

                </div> <!-- container -->

            </div> <!-- content -->

            <!-- ============================================================= -->
            <!-- ===============    footer content start  ================= -->
            <!-- ============================================================= -->

            <footer class="footer">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-6">
                            © Shimba - by Beethemesdesign
                        </div>
                        <div class="col-md-6">
                            <div class="text-md-right footer-links d-none d-md-block">
                                <a href="javascript: void(0);">Buy Now</a>
                                <a href="https://www.php.cn/xiazai/code/">Rate us</a>
                               
                            </div>
                        </div>
                    </div>
                </div>
            </footer>
            <!-- ============================================================= -->
            <!-- ===============    footer content start  ================= -->
            <!-- ============================================================= -->


        </div>

        <!-- ============================================================== -->
        <!-- End Page content -->
        <!-- ============================================================== -->


    </div>
    <!-- END wrapper -->



    <!-- Required js -->
    <script src="../../assets/js/app.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>

    <script>
        $(document).ready(function() {
            $('.more-user-details').popover({
                placement: 'top',
                trigger: 'hover',
                html: true,
                content: '<div><div class="media align-items-center"><img src="../../assets/images/users/avatar-4.jpg" class="rounded-circle ui-w-50 mr-3" alt="Avtar image"><div class="media-body"><h4 class="mt-0 mb-1">Jacob Doe <small class="mdi mdi-checkbox-blank-circle text-success"></small><small>Active</small></h4><p class="mb-0">Jacob_Doe@example.com</p></div></div></div><div class="alert alert-warning p-2 mb-1 mt-3 rounded"><div class="media align-items-center"><h3 class="mdi mdi-bell-ring-outline alert-heading m-0"></h3><div class="media-body pl-3"><small><b class="d-block">Unpaid invoice</b></small><small>This account will be disabled starting <b>14 March 1996</b>.</small></div></div></div><div class="no-gutters text-center row pt-3"><div class="col-6"><div><i class="feather icon-pie-chart h4 text-danger"></i></div><div class="mt-2"><b class="mb-1">$9,693</b><span class="d-block">revenue</span></div></div><div class="col-6"><div><i class="feather icon-users h4 text-primary"></i></div><div class="mt-2"><b class="mb-1">2,345</b><span class="d-block">users</span></div></div></div>'
            });
        });

        $(".message .close").on('click',function () {
            $(this).closest(".message")
                .transition("fade");
        })
    </script>
    <script src="../../assets/js/ui/component.todo.js"></script>


</body>

</html>
